<template>
    <div class="page-follows">
        <van-nav-bar class="follows-tilte" left-arrow :fixed="true" :title="numberFer + ' ' + $t('m.Followers')" @click-left="$router.back(-1)" v-if="f_type == 1 || f_type == 3"></van-nav-bar>
        <van-nav-bar class="follows-tilte" left-arrow :fixed="true" :title="numberFing + ' ' + $t('m.Following')" @click-left="$router.back(-1)" v-if="f_type == 2 || f_type == 4"></van-nav-bar>
        <div style="padding: 23px;"></div>
        <van-list
            v-model="userLoading"
            :finished="finished"
            loading-text=" "
            @load="getUserList"
        >
            <div class="user-info-box" v-for="(item, index) in tableData" :key="index">
                <div class="user-info" v-if="item.id != userOwnId">
                    <i class="i-icon1" @click="goToSellerDetail(item.id)">
                        <img :src="item.photo" :onerror="defaultHeadImg" v-if="item.photo"/>
                        <img src="" :onerror="defaultHeadImg" v-else/>
                    </i>
                    <div class="info-right-box">
                        <div class="info-left" @click="goToSellerDetail(item.id)">
                            <p class="title">{{translateString(item.name)}}</p>
                            <p class="infos">{{item.followers || 0}} followers</p>
                        </div>
                        <div class="info-right">
                            <van-button type="default" size="small" class="following-btn" :loading="loadingFollow" @click="toCancelFollow(item.id, index)" v-if="item.hasFollowed">Following</van-button>
                            <van-button type="default" size="small" class="follow-btn" :loading="loadingFollow" @click="toFollow(item.id, index)" v-else>Follow</van-button>
                        </div>
                    </div>
                </div>
                <div class="user-info" v-else>
                    <i class="i-icon1">
                        <img :src="item.photo" :onerror="defaultHeadImg" v-if="item.photo"/>
                        <img src="" :onerror="defaultHeadImg" v-else/>
                    </i>
                    <div class="info-right-box">
                        <div class="info-left">
                            <p class="title">{{translateString(item.name)}}</p>
                            <p class="infos">{{item.followers || 0}} followers</p>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <div v-if="finished && !userLoading" class="no-more">{{$t('m.Nomore')}}~</div>
    </div>
</template>
<script>
    import {followersList, followingList, myFollowersList, myFollowingList, getFollow, getCancelFollow} from '../../static/api/mgc_api'
    import Qs from 'qs'
    export default {
        name: 'Follows',
        data() {
            return {
                defaultHeadImg: 'this.src="' + require('../../static/img/images/user-head.png') + '"',
                defaultImage: {
                    backgroundImage: "url(" + require("../../static/img/images/user-head.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                },
                userLoading: false,
                finished: false,
                sellerId: '',
                userOwnId: '',
                loadingFollow: false,
                numberFer: '',
                numberFing: '',
                f_type: '',

                tableData: [],
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                },
            };
        },
        methods: {
            translateString(str){
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
            },
            getUserList(pageNum) {
                if (pageNum == 1) {
                    this.pageData.pageNum = 1;
                    this.tableData = [];
                }

                if (this.f_type == 1) {
                    let searchForm = {};

                    // searchForm.sellerId = this.sellerId
                    searchForm.pageNum = this.pageData.pageNum
                    searchForm.pageSize = this.pageData.pageSize
                    myFollowersList(searchForm).then((res) => {
                        if (res.data.errorID == 0) {
                            let dataList = res.data.object.list || []

                            // // 刷新列表 or 加载更多
                            if (this.pageData.pageNum == 1) {
                                window.scrollTo(0, 0)
                                this.tableData = dataList
                                this.finished = false;
                            } else {
                                this.tableData = this.tableData.concat(dataList)
                            }
                            // console.log(this.tableData, 'this.tableData')
                            // // 分页信息配置
                            this.pageInfo.totalPages = res.data.object.pages
                            this.pageInfo.totalCount = res.data.object.total
                            this.numberFer = res.data.object.total
                            this.pageData.pageNum = this.pageData.pageNum + 1
                            if (this.pageData.pageNum > this.pageInfo.totalPages) {
                                this.finished = true
                            }
                            this.userLoading = false;
                        } else if (res.data.errorID === 100004) {
                            this.$router.push('/login-register/loginregister')
                        } else {
                            this.$toast(res.data.message)
                            this.finished = true
                            this.userLoading = false;
                        }

                    }).catch((e) => {
                        this.$toast('No internet, please try again')
                        this.finished = true
                        this.userLoading = false
                    })
                } else if (this.f_type == 2) {
                    let searchForm = {};

                    // searchForm.sellerId = this.sellerId
                    searchForm.pageNum = this.pageData.pageNum
                    searchForm.pageSize = this.pageData.pageSize
                    myFollowingList(searchForm).then((res) => {
                        if (res.data.errorID == 0) {
                            let dataList = res.data.object.list || []

                            // // 刷新列表 or 加载更多
                            if (this.pageData.pageNum == 1) {
                                window.scrollTo(0, 0)
                                this.tableData = dataList
                                this.finished = false;
                            } else {
                                this.tableData = this.tableData.concat(dataList)
                            }
                            // console.log(this.tableData, 'this.tableData')
                            // // 分页信息配置
                            this.pageInfo.totalPages = res.data.object.pages
                            this.pageInfo.totalCount = res.data.object.total
                            this.numberFing = res.data.object.total
                            this.pageData.pageNum = this.pageData.pageNum + 1
                            if (this.pageData.pageNum > this.pageInfo.totalPages) {
                                this.finished = true
                            }
                            this.userLoading = false;
                        } else if (res.data.errorID === 100004) {
                            this.$router.push('/login-register/loginregister')
                        } else {
                            this.$toast(res.data.message)
                            this.finished = true
                            this.userLoading = false;
                        }

                    }).catch((e) => {
                        this.$toast('No internet, please try again')
                        this.finished = true
                        this.userLoading = false
                    })
                } else if (this.f_type == 3) {
                    let searchForm = {};

                    searchForm.sellerId = this.sellerId
                    searchForm.pageNum = this.pageData.pageNum
                    searchForm.pageSize = this.pageData.pageSize
                    followersList(searchForm).then((res) => {
                        if (res.data.errorID == 0) {
                            let dataList = res.data.object.list || []

                            // // 刷新列表 or 加载更多
                            if (this.pageData.pageNum == 1) {
                                window.scrollTo(0, 0)
                                this.tableData = dataList
                                this.finished = false;
                            } else {
                                this.tableData = this.tableData.concat(dataList)
                            }
                            // console.log(this.tableData, 'this.tableData')
                            // // 分页信息配置
                            this.pageInfo.totalPages = res.data.object.pages
                            this.pageInfo.totalCount = res.data.object.total
                            this.numberFer = res.data.object.total
                            this.pageData.pageNum = this.pageData.pageNum + 1
                            if (this.pageData.pageNum > this.pageInfo.totalPages) {
                                this.finished = true
                            }
                            this.userLoading = false;
                        } else {
                            this.$toast(res.data.message)
                            this.finished = true
                            this.userLoading = false;
                        }

                    }).catch((e) => {
                        this.$toast('No internet, please try again')
                        this.finished = true
                        this.userLoading = false
                    })
                } else if (this.f_type == 4) {
                    let searchForm = {};

                    searchForm.sellerId = this.sellerId
                    searchForm.pageNum = this.pageData.pageNum
                    searchForm.pageSize = this.pageData.pageSize
                    followingList(searchForm).then((res) => {
                        if (res.data.errorID == 0) {
                            let dataList = res.data.object.list || []

                            // // 刷新列表 or 加载更多
                            if (this.pageData.pageNum == 1) {
                                window.scrollTo(0, 0)
                                this.tableData = dataList
                                this.finished = false;
                            } else {
                                this.tableData = this.tableData.concat(dataList)
                            }
                            // console.log(this.tableData, 'this.tableData')
                            // // 分页信息配置
                            this.pageInfo.totalPages = res.data.object.pages
                            this.pageInfo.totalCount = res.data.object.total
                            this.numberFing = res.data.object.total
                            this.pageData.pageNum = this.pageData.pageNum + 1
                            if (this.pageData.pageNum > this.pageInfo.totalPages) {
                                this.finished = true
                            }
                            this.userLoading = false;
                        } else {
                            this.$toast(res.data.message)
                            this.finished = true
                            this.userLoading = false;
                        }

                    }).catch((e) => {
                        this.$toast('No internet, please try again')
                        this.finished = true
                        this.userLoading = false
                    })
                }

            },
            toCancelFollow(id, index) {
                let data = {
                    'toUserId': id,
                }
                let params = Qs.stringify(data)

                getCancelFollow(params).then((res) => {
                    if (res.data.errorID == 0) {
                        if (this.f_type == 2) {
                            this.tableData.splice(index, 1)
                            this.numberFing = Number(this.numberFing) - 1
                        } else {
                            this.tableData[index].hasFollowed = false
                            this.tableData[index].followers = this.tableData[index].followers - 1
                        }
                    } else if (res.data.errorID === 100004) {
                        this.$router.push('/login-register/loginregister')
                    } else {
                        this.$toast(res.data.message)
                    }
                    this.loadingFollow = false
                }).catch((e) => {
                    this.loadingFollow = false
                    this.$toast('No internet, please try again')
                })
            },
            toFollow(id, index) {
                let data = {
                    'toUserId': id,
                }
                let params = Qs.stringify(data)

                getFollow(params).then((res) => {
                    if (res.data.errorID == 0) {
                        this.tableData[index].hasFollowed = true
                        this.tableData[index].followers = this.tableData[index].followers + 1
                        if (this.f_type == 2) {
                            this.numberFing = Number(this.numberFing) - 1
                        }
                    } else if (res.data.errorID === 100004) {
                        this.$router.push('/login-register/loginregister')
                    } else {
                        this.$toast(res.data.message)
                    }
                    this.loadingFollow = false
                }).catch((e) => {
                    this.loadingFollow = false
                    this.$toast('No internet, please try again')
                })
            },
            goToSellerDetail(id) {
                this.$router.push({
                    path:'/user/other-account',
                    query:{
                        userId: id
                    }
                })
            },
            getUserOwnId() {
                let userInfo = localStorage.getItem('userInfo') || ''
                if (userInfo) {
                    userInfo = JSON.parse(userInfo);
                    this.userOwnId = userInfo.id;
                }
            },
        },
        mounted() {
            this.sellerId = this.$route.query.id || ''
            this.f_type = this.$route.query.f_type || '' // 1: my-followers; 2: my-following; 3: other-followers; 4: other-following;
            // this.getUserList()
            this.getUserOwnId()
        }
    }

</script>
<style>
    .page-follows .van-nav-bar{
        background-color: #FF9900;
        color: #fff;
    }
    .page-follows .van-nav-bar .van-icon{
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .page-follows .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
    .page-follows .follow-btn.van-button--default{
        background: #fff;
        color: #FF9900;
        border: 1px solid #FF9900;
        margin-top: 8px;
        border-radius: 5px;
    }
    .page-follows .following-btn.van-button--default{
        background: #FF9900;
        color: #fff;
        border-width: 0;
        margin-top: 8px;
        border-radius: 5px;
    }
</style>
<style scoped>
    .user-info-box {
        padding: 15px 4%;
        border-bottom: 1px solid #f2f2f2;
    }
    .user-info {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 4.1em;
        min-height: 50px;
        line-height: 150%;
        justify-content: space-around;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .user-info i{
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        border-radius: 50%;
        overflow: hidden;
    }
    .user-info p.title{
        font-size: 16px;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        padding: 0 4% 0 0;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
    }
    .user-info p.infos{
        padding: 0 4% 0 0;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
        color: rgb(102, 102, 102);
    }
    .user-info i img{
        width: 100%;
        height: 100%;
        display: block;
    }
    .info-right-box{
        display: flex;
    }
    .info-left{
        flex: 1;
    }
    .no-more{
        border-top: 1px solid #F2F2F2;
        height: 50px;
        line-height: 50px;
        color: #909399;
        text-align: center;
    }
</style>
